//拖拽
<template>
  <div class="dragList">
    <div class="dragList-list1">
      <h3 style="text-align: center">标签选择</h3>
      <draggable
        :list="list2"
        item-key="id"
        :animation="300"
        :sort="false"
        :group="{ name: 'article', pull: 'clone' }"
        @end="end1"
        class="dragArea1"
      >
        <template #item="{ element }">
          <div class="list-complete-item1">
            <div class="list-complete-item-handle2">{{ element.name }}</div>
          </div>
        </template>
      </draggable>
    </div>

    <div class="dragList-list2">
      <h3 style="text-align: center">拖动至此处</h3>
      <draggable
        :list="list1"
        item-key="id"
        :group="{ name: 'article', pull: '' }"
        :disabled="false"
        @add="handleAdd"
        @start="start2"
        @end="end2"
        class="dragArea2"
        :animation="300"
      >
      <!-- <div class="list-complete-item2">
            <div class="list-complete-item-handle">{{ element.name }}</div>
            <div>
              <delete-outlined  @click="handleDel(index, element.id)" />
            </div>
          </div> -->
        <template #item="{ element, index }">
          <div>
            <component :is="element.tag" v-bind="element"></component>
          </div>
        </template>
      </draggable>
      
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, toRaw } from "vue";
import { DeleteOutlined } from '@ant-design/icons-vue';
import draggable from "vuedraggable";
const staticData = {};
export default defineComponent({
  components: {
    draggable,
    DeleteOutlined
  },
  setup() {
    const data = reactive({
      disabled: false,
      list1: [],
      list2: [
        { id: 1, name: "输入框",tag:'AInput', },
        { id: 2, name: "按钮",tag:'AButton' },
        // { id: 3, name: "标签3" },
        // { id: 4, name: "标签4" },
        // { id: 5, name: "标签5" },
      ],
    });
    const mothods = {
      end1(ev) {
        console.log("拖动结束1", ev);
      },
      start2(event) {
        console.log("开始拖动", event);
      },
      end2(ev) {
        console.log("拖动结束2", ev);
      },
      handleDel(index, id) {
        data.list1.splice(index, 1);
        let q = data.list2.find((value, index, arr) => {
          return value.id === id;
        });
      },
      handleAdd(e){
        // console.dir(e.item._underlying_vm_.tag);
        // data.list1.push({
        //   ...e.item._underlying_vm_
        // })
        // console.log(data.list1);
      }
    };
    return {
      ...toRefs(data),
      ...staticData,
      ...mothods,
    };
  },
});
</script>
<style lang="less" scoped>
.dragList {
  display: flex;
  width: 80%;
  height: 300px;
  padding: 20px;
}
.dragList-list1 {
  width: 120px;
}
.list-complete-item1 {
  cursor: pointer;
  font-size: 14px;
  padding: 0 12px;
  display: inline-block;
  margin-bottom: 10px;
  width: 100px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #bfcbd9;
  transition: all 1s;
}
.dragArea1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dragList-list2 {
  flex:1;
  margin-top: 20px;
  height: 300px;
  border: 1px solid #8a8a8a;
}
.dragArea2 {
  display: flex;
  align-items: center;
  height:240px;
  border: 1px solid #8a8a8a;
}
.list-complete-item2 {
  cursor: pointer;
  font-size: 14px;
  padding: 0 12px;
  display: inline-block;
  margin: 10px;
  width: 100px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #bfcbd9;
  transition: all 1s;
}
</style>
